<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head lang="zh-CN">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单确认</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--<link rel="stylesheet" type="text/css" href="styles.css">-->
	<link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="layer/2.4/layer.js"></script>
	<style type="text/css">
		.round {
		   -moz-border-radius: 10px;      /* Gecko browsers */
		   -webkit-border-radius: 10px;   /* Webkit browsers */
		   border-radius:10px;            /* W3C syntax */
		}
		 /* 弹窗 */
		.modal {
		    display: none; /* 默认隐藏 */
		    position: fixed;
		    z-index: 1;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%;
		    overflow: auto;
		    background-color: rgb(0,0,0);
		    background-color: rgba(0,0,0,0.4);
		    -webkit-animation-name: fadeIn;
		    -webkit-animation-duration: 0.4s;
		    animation-name: fadeIn;
		    animation-duration: 0.4s
		}

		/* 弹窗内容 */
		.modal-content {
		    position: fixed;
		    bottom: 0;
		    background-color: #fefefe;
		    width: 100%;
		    -webkit-animation-name: slideIn;
		    -webkit-animation-duration: 0.4s;
		    animation-name: slideIn;
		    animation-duration: 0.4s
		}

		/* 关闭按钮 */
		.close {
		    color: red;
		    float: right;
		    font-size: 28px;
		    font-weight: bold;
		}

		.close:hover,
		.close:focus {
		    color: #000;
		    text-decoration: none;
		    cursor: pointer;
		}

		.modal-header {
			text-align:center;
			border:0px solid red;
		    padding: 2px 16px;
		    background-color: #f5f5f7;
		    color: red;

		}

		.modal-body {
		padding: 2px 16px;
		text-align: center;
		padding-top:20px;
		padding-bottom:20px;
		background-color: #f5f5f7;

		}

		.modal-footer {
			border:0px solid red;
			text-align:center;
		    padding: 2px 16px;
		    padding-top:20px;
		    padding-bottom:20px;
		    background-color: #f5f5f7;
		    color: white;
		}

		/* 添加动画 */
		@-webkit-keyframes slideIn {
		    from {bottom: -300px; opacity: 0}
		    to {bottom: 0; opacity: 1}
		}

		@keyframes slideIn {
		    from {bottom: -300px; opacity: 0}
		    to {bottom: 0; opacity: 1}
		}

		@-webkit-keyframes fadeIn {
		    from {opacity: 0}
		    to {opacity: 1}
		}

		@keyframes fadeIn {
		    from {opacity: 0}
		    to {opacity: 1}
		}
	</style>
	<script type="text/javascript">
			$(document).ready(function(){
				// 获取弹窗
				var modal = document.getElementById('myModal');
				// 打开弹窗的按钮对象
				var btn = document.getElementById("myBtn");
				// 获取 <span> 元素，用于关闭弹窗 that closes the modal
				var span = document.getElementsByClassName("close")[0];
				// 点击按钮打开弹窗

				btn.onclick = function() {
				    modal.style.display = "block";
				};
				// 点击 <span> (x), 关闭弹窗
				span.onclick = function() {
				    modal.style.display = "none";
				};
				// 在用户点击其他地方时，关闭弹窗
				window.onclick = function(event) {
				    if (event.target == modal) {
				        modal.style.display = "none";
				    }
				};
			});
	</script>
	<script type="text/javascript">
			function buy(){
				var moblie=document.getElementById("moblie").value;
				var yphone=document.getElementById("yphone").value;
				window.location.href="${basePath}/u/JumpBuy?userid="+moblie+"&yphone="+yphone;
			}
			function add(){
				layer.confirm('授权人数到达上限,请点击前往购买',function(){

				});
			}
			function show(){
				window.location.href="${basePath}/csh/rightInformation.jsp";
			}
			function pay(){
				var moblie=document.getElementById("moblie").value;
				var yphone=document.getElementById("yphone").value;
				window.location.href="${basePath}/p/pay1?userid="+moblie+"&yphone="+yphone;
			}
	</script>
  </head>
  <body>
  	<div class="container-fluid">
      <div class="row">
      	<input type="hidden" name="moblie" id="moblie" value="${moblie}">
      	<input type="hidden" name="yphone" id="yphone" value="${yphone}">
	    <!-- 弹窗 -->
		<div id="myModal" class="modal">
	  	<!-- 弹窗内容 -->
		<div class="modal-content">
		  	<div class="modal-header">
		    	<span class="close">&times;</span>
		    	<h2>支付</h2>
		  	</div>
		  	<div style="border: 1px #bbbbbb solid;"></div>
			  	<div class="modal-body">
				    <h4>向E安全支付</h4>
				    <h2>￥${total}</h2>
			  	</div>
			  	<div style="border: 1px #bbbbbb solid;"></div>

			  	<div>
				  	<div style="border: 0px solid red; width: 50%; height:40px; float: right; text-align: right; padding-top: 10px; padding-right: 20px; background-color: #f5f5f7;"><img alt="" src="${basePath}/csh/image/wx.jpg" style="width: 25px; height: 25px;">微信</div>
				  	<div style="border: 0px solid red; width: 50%; height:40px; float: right; text-align: left; padding-top: 10px; padding-left: 20px; background-color: #f5f5f7; color: #abb5b8;">支付方式</div>
			  	</div>

			  	<br/><br/>
			  	<div style="border: 1px #bbbbbb solid;"></div>
				  	<div class="modal-footer">
				    <button onclick="pay()" style="width: 100%; height:50px; background-color: red; color: white;" class="round"><img alt="" src="${basePath}/csh/image/pay.jpg">立即支付</button>
			  	</div>
			</div>
		</div>
     	<table border="0px solid red" width="100%" height="100%">
     		<tr height="5%">
     			<td colspan="3" style="padding-left: 20px; font-size: 14px;">订单金额</td>
     		</tr>
     		<tr height="8%">
     			<td colspan="3" style="color: #ffc989; font-size: 30px; padding-left: 40px;">￥${total}</td>
     		</tr>
     		<tr height="1%">
     			<td colspan="3"><div style="border: 1px #bbbbbb solid;"></div></td>
     		</tr>
     		<tr height="3%">
     			<td colspan="3" style="padding-left: 20px; font-size: 14px;">普通饭票</td>
     		</tr>
     		<tr height="1%">
     			<td colspan="3"><div style="border: 1px #bbbbbb solid;"></div></td>
     		</tr>
     		<tr height="8%" align="center" >
   				<td colspan="3">
     				<div style="border: px #f3f3f3 solid; width: 100%; height: 100%;" >
	     				<div style="float: left; border: px red solid; width: 20%; height:100%; text-align: center;"><img src="${basePath}/csh/image/bu.jpg"></div>
	     				<div style="float: left; border: px red solid; width: 30%; height:100%; text-align: center; color: #ffc989; text-align: left;">可用:0.00</div>
	     				<div style="float: left; border: px red solid; width: 50%; height:100%; font-size: 16px;"><input type="text" style="width: 100%; height: 100%;" value="请输入抵扣饭票金额" onfocus='if(this.value=="请输入抵扣饭票金额"){this.value="";}; ' onblur='if(this.value==""){this.value="请输入抵扣饭票金额";};'></div>
     				</div>
   				</td>
     		</tr>
     		<tr height="1%">
     			<td colspan="3"><div style="border: 1px #bbbbbb solid;"></div></td>
     		</tr>
     		<tr height="3%">
     			<td colspan="3" style="padding-left: 20px; font-size: 14px;">第三方支付</td>
     		</tr>
     		<tr height="1%">
     			<td colspan="3"><div style="border: 1px #bbbbbb solid;"></div></td>
     		</tr>
     		<tr height="8%" align="center" >
   				<td colspan="3">
	   				<div style="float: left; border: px red solid; width: 20%; height:100%; text-align: center; padding-top: 10px;"><img alt="" src="${basePath}/csh/image/wx.jpg"></div>
	   				<div style="float: left; border: px red solid; width: 30%; height:100%; font-size: 14px; color: black; padding-top: 15px; text-align: left;">微信手机支付</div>
	   				<div style="float: left; border: px red solid; width: 50%; height:100%; font-size: 12px; color: black; padding-top: 10px; padding-bottom:10px; padding-right: 10px; text-align: right;"><input type="radio" name="radio"></div>
   				</td>
     		</tr>
     		<tr height="1%">
     			<td colspan="3"><div style="border: 1px #bbbbbb solid;"></div></td>
     		</tr>
     		<tr height="8%" align="center" >
   				<td colspan="3">
	   				<div style="float: left; border: px red solid; width: 20%; height:100%; text-align: center; padding-top: 10px;"><img alt="" src="${basePath}/csh/image/zfb.jpg"></div>
	   				<div style="float: left; border: px red solid; width: 30%; height:100%; font-size: 14px; color: black; padding-top: 15px; text-align: left;">支付宝手机支付</div>
	   				<div style="float: left; border: px red solid; width: 50%; height:100%; font-size: 12px; color: black; padding-top: 10px; padding-bottom:10px; padding-right: 10px; text-align: right;" ><input type="radio" name="radio"></div>
   				</td>
     		</tr>
     		<tr height="1%">
     			<td colspan="3"><div style="border: 1px #bbbbbb solid;"></div></td>
     		</tr>
     		<tr height="34%" style="background-color: white"><td colspan="3"></td></tr>
     		<tr height="10%" style="background-color: #edeff0">
	     		<td colspan="3">
		     			<div style="float: left; border: px red solid; width: 50%; height:100%; text-align: center; background-color: white; color: #ffc989;">
		     				<span>￥${total}<br/>使用饭票0.00</span>
		     			</div>
		   				<div style="float: left; border: px red solid; width: 50%; height:100%; text-align: center; background-color: #49a1f2; color: white;" id="myBtn" >
		   					<!-- <button style="font-size: 16px; height:100%;width:100%; background-color: #49a1f2; color: white" id="myBtn">确定支付</button> -->
		   					<span>确定<br/>支付</span>
		   				</div>
	     		</td>
     		</tr>
     	</table>
      </div>
    </div>
  </body>
</html>
